<!--
 * @Description: 插件
 * @Author: zzj
 * @Date: 2021-10-12 12:07:07
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-12 21:57:07
-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>插件</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
</head>
<body>
	<div id="app">
		<div>{{new Date().getTime() | formatTime }}</div>
		<briup-list></briup-list>
		<input type="text" v-focus>
	</div>
	<script>
		//插件的封装 npm install briupPlugin
		let briupPlugin = {
			install:function(Vue,options){
				Vue.directive('focus', {
					inserted: function (el) {
						el.focus();   //聚焦
					}
				});
				Vue.component("briup-list",{
					template:`
						<div>插件列表</div>
					`,
				});
				Vue.filter("formatTime", function (val) {
					return moment(val).format("YYYY-MM-DD hh:mm")
				});
				Vue.prototype.$message = function(msg){
					//逻辑...
					alert("组件弹窗"+msg);
				}
			}
		}
		//插件应用
		Vue.use(briupPlugin)

		new Vue({
			el:"#app",
			mounted(){
				this.$message("hello world")
			}
		})
	</script>
</body>
</html>